<script setup lang="ts">
import type { IEditorConfig, IToolbarConfig } from '@wangeditor/editor';

import MaterialPicker from '@/components/material/picker.vue';
import { Toolbar, Editor as WEditor } from '@wangeditor/editor-for-vue';
import type { CSSProperties } from 'vue';

import { addUnit } from '@/utils/util';

import '@wangeditor/editor/dist/css/style.css'; // 引入 css

const props = withDefaults(
  defineProps<{
    height?: number | string;
    mode?: 'default' | 'simple';
    modelValue?: string;
    toolbarConfig?: Partial<IToolbarConfig>;
    width?: number | string;
  }>(),
  {
    modelValue: '',
    mode: 'default',
    height: '100%',
    width: 'auto',
    toolbarConfig: () => ({}),
  },
);

const emit = defineEmits<{
  (event: 'update:modelValue', value: string): void;
}>();

// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef();
const materialPickerRef = shallowRef<InstanceType<typeof MaterialPicker>>();
const fileType = ref('');

let insertFn: any;

const editorConfig: Partial<IEditorConfig> = {
  MENU_CONF: {
    uploadImage: {
      customBrowseAndUpload(insert: any) {
        fileType.value = 'image';
        materialPickerRef.value?.showPopup(-1);
        insertFn = insert;
      },
    },
    uploadVideo: {
      customBrowseAndUpload(insert: any) {
        fileType.value = 'video';
        materialPickerRef.value?.showPopup(-1);
        insertFn = insert;
      },
    },
  },
};

const styles = computed<CSSProperties>(() => ({
  height: addUnit(props.height),
  width: addUnit(props.width),
}));
const valueHtml = computed({
  get() {
    return props.modelValue;
  },
  set(value) {
    emit('update:modelValue', value);
  },
});

const selectChange = (fileUrl: string[]) => {
  fileUrl.forEach((url) => {
    insertFn(url);
  });
};

// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
  const editor = editorRef.value;
  if (editor == null) return;
  editor.destroy();
});

const handleCreated = (editor: any) => {
  editorRef.value = editor; // 记录 editor 实例，重要！
};
</script>
<template>
  <div class="border-br flex flex-col border" :style="styles">
    <Toolbar
      class="border-br border-b"
      :editor="editorRef"
      :default-config="toolbarConfig"
      :mode="mode"
    />
    <WEditor
      class="flex-1 overflow-hidden"
      v-model="valueHtml"
      :default-config="editorConfig"
      :mode="mode"
      @on-created="handleCreated"
    />
    <MaterialPicker
      ref="materialPickerRef"
      :type="fileType"
      :limit="-1"
      hidden-upload
      @change="selectChange"
    />
  </div>
</template>

<style lang="scss">
.w-e-full-screen-container {
  z-index: 999;
}
.w-e-text-container [data-slate-editor] ul {
  list-style: disc;
}
.w-e-text-container [data-slate-editor] ol {
  list-style: decimal;
}
h1 {
  font-size: 2em;
}
h2 {
  font-size: 1.5em;
}
h3 {
  font-size: 1.17em;
}
h4 {
  font-size: 1em;
}
h5 {
  font-size: 0.83em;
}
h1,
h2,
h3,
h4,
h5 {
  font-weight: bold;
}
</style>
